<template>
	<view class="address">
		<!-- 地址表单 -->
		<view class="form">
			<u-form :model="form">
				<u-form-item prop="name">
					<u-input v-model="form.name" placeholder="姓名"></u-input>
				</u-form-item>
				<u-form-item prop="tel">
					<u-input v-model="form.mobile" placeholder="手机号"></u-input>
				</u-form-item>
				<u-form-item prop="region">
					<input v-model="form.province" disabled placeholder="省份/城市/区县" placeholder-style="color: #c0c4cc;" @tap="isRegion = true"></input>
					<u-picker mode="region" v-model="isRegion" @confirm="confirm"></u-picker>
				</u-form-item>
				<u-form-item prop="addressDetails">
					<u-input v-model="form.address" placeholder="详细地址，如街道/楼牌号"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<!-- 是否默认地址 -->
		<view class="default_box flex-r-b-c">
			<view class="text">设为默认地址</view>
			<u-switch v-model="checked" @change="change"></u-switch>
		</view>

		<!-- 按钮 -->
		<view class="btn_box">
			<view class="preservation" @tap="btn">保存</view>
			<view class="delete" @tap="deletebtn">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null, // 地址id
				checked: false, // 默认
				form: { // 表单数据
					name: '',
					mobile: '',
					province: '',
					address: ''
				},
				isRegion: false , // 省市区弹框
			};
		},
		onLoad(options) {
			// 判断是否传了id，进行查询
			if (options.id) {
				this.id = options.id
				this.getAddressDetails(options.id)
			}
		},
		methods: {
			// 开关
			change(e) {
				this.checked = e
			},
			// 获取省市区
			confirm(e){
				this.form.province = e.province.label + e.city.label + e.area.label
			},
			// 获取用户地址详情
			getAddressDetails(id) {
				let that = this
				let data = {
					type: 1,
					id: id
				}
				that.$api.address_details(data).then(res => {
					that.form = res.data.data
					that.checked = res.data.data.default == 1 ? true : false
				})
			},
			// 点击删除
			deletebtn() {
				let that = this
				if (that.id != null) {
					that.$api.address_delete({
						id: that.id
					}).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					})
				}
			},
			// 点击保存
			btn() {
				let that = this
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				that.checked == true ? that.form.default = 1 : that.form.default = 2
				if (that.form.name == '') {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					})
				} else if (!reg_tel.test(that.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				} else if (that.form.province == '') {
					uni.showToast({
						title: '省市区不能为空',
						icon: 'none'
					})
				} else if (that.form.address == '') {
					uni.showToast({
						title: '详细地址不能为空',
						icon: 'none'
					})
				} else {
					that.$api.address_save(that.form).then(res => {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.address {
		width: 90vw;
		margin: 40rpx auto;

		.form {
			background-color: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 20rpx;
		}

		.default_box {
			box-sizing: border-box;
			padding: 20rpx;

			.text {
				font-size: 28rpx;
				font-weight: 500;
				color: #7E7E7E;
			}
		}

		.btn_box {
			width: 100%;
			margin: 200rpx auto;

			.preservation {
				margin: 20rpx auto;
				width: 80%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #FFFFFF;
				background-color: #45806E;
				font-size: 32rpx;
				font-weight: 500;
			}

			.delete {
				margin: 20rpx auto;
				width: 80%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #FFFFFF;
				border: 1px solid #CCCCCC;
				color: #4B4B4B;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
			}
		}

	}
</style>
